<template>
  <div class="login">
    <div class="login-panel">
      <el-card style="max-width: 330px">
        <h2>lhy管理系统</h2>
        <el-tabs
          type="border-card"
          style="height: 165px"
          :stretch="true"
          @tab-change="tabChange"
          v-model="activeName"
        >
          <el-tab-pane name="account">
            <template #label>
              <span>
                <el-icon style="vertical-align: middle" size="13"><UserFilled /></el-icon>
                <span style="vertical-align: middle; margin-left: 2px">账号登录</span>
              </span>
            </template>
            <el-form
              ref="accontFormRef"
              style="max-width: 300px"
              :model="accontForm"
              :rules="accontRules"
              label-width="70px"
              label-position="left"
              :size="formSize"
              status-icon
            >
              <el-form-item label="账号" prop="account">
                <el-input v-model="accontForm.account" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="accontForm.password" show-password />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane name="phone">
            <template #label>
              <span class="custom-tabs-label">
                <el-icon style="vertical-align: middle" size="15"><Cellphone /></el-icon>
                <span style="vertical-align: middle; margin-left: 2px">手机登录</span>
              </span>
            </template>
            <el-form
              ref="phoneFormRef"
              style="max-width: 300px"
              :model="phoneForm"
              :rules="phoneRules"
              label-width="70px"
              label-position="left"
              :size="formSize"
              status-icon
            >
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="phoneForm.phone" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="phoneForm.password" show-password />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div class="control-account">
          <el-checkbox v-model="isRemPwd" label="记住密码" />
          <el-link :underline="false">忘记密码</el-link>
        </div>
        <el-button type="primary" style="width: 100%; margin-top: 10px" @click="submitForm()"
          >立即登录</el-button
        >
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules, TabPaneName } from 'element-plus'
import { ElMessage } from 'element-plus'
import useUserStore from '@/stores/user'

onMounted(() => {
  // 假设您有一个方法或逻辑来获取表单实例
  formEl.value = accontFormRef.value
})
const userStore = useUserStore()
//用户表单
interface AccontForm {
  account: string
  password: string
}

const formSize = ref<ComponentSize>('default')
const accontFormRef = ref<FormInstance>()
const accontForm = reactive<AccontForm>({
  account: '',
  password: ''
})

const accontRules = reactive<FormRules<AccontForm>>({
  account: [{ required: true, message: '请输入账户', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

//手机表单
interface PhoneForm {
  phone: string
  password: string
}

const phoneFormRef = ref<FormInstance>()
const phoneForm = reactive<PhoneForm>({
  phone: '',
  password: ''
})
// console.log('phoneFormRef---' + !phoneFormRef.value + '-------' + phoneFormRef.value)
const phoneRules = reactive<FormRules<PhoneForm>>({
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const isRemPwd = ref(false)

const activeName = ref<string>('account')
const formEl = ref<FormInstance>()

const tabChange = (name: TabPaneName) => {
  if (name == 'account') {
    formEl.value = accontFormRef.value
  } else if (name == 'phone') {
    formEl.value = phoneFormRef.value
  }
}

const submitForm = async () => {
  if (!formEl.value) return
  await formEl.value.validate((valid, fields) => {
    if (valid) {
      userStore.setToken({ username: accontForm.account, password: accontForm.password })
    } else {
      ElMessage.error('请按照规则填写！')
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/img/login.png');
  background-size: 100% 100%;
}
.login-panel {
  width: 330px;
}
.control-account {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
